<template>
	<div>
		<div class="flex justify-between">
			<!-- 选择器 -->
			<div class="flex">
				<t-select 
				class="w-80 mr-4"
				v-model="form.positionValue" 
				:options="$store.state.user.positionInfo" 
				:keys="{ label: 'position_name', value: 'position_id' }" 
				placeholder="请选择岗位名称"/>
				<t-input
				class="w-80 mr-4"
				v-model="form.userNameValue" 
				placeholder="请输入员工昵称"
				type="search" />
				<t-button @click="determine()">确定</t-button>
			</div>
			<!-- 刷新按钮 -->
			<t-button variant="outline" @click="menuTree()">刷新</t-button>
		</div>
		<div class="flex justify-between items-center">
			<!-- 按钮 -->
			<div class="flex mt-4 mb-4">
				<t-button class="mr-4" @click="goDivisional()" v-if="isButtonAuthority('部门管理')">部门管理</t-button>
				<t-button class="mr-4" @click="goPosition()" v-if="isButtonAuthority('岗位管理')">岗位管理</t-button>
				<t-button class="mr-4" @click="goAddUser()" theme="success" v-if="isButtonAuthority('添加员工')">添加员工</t-button>
				<t-button @click="goSalary()" :disabled="salaryDisabled" v-if="isButtonAuthority('工资结算')">工资结算</t-button>
			</div>
			<div>
				<t-checkbox :checked="leaveUserShowValue" :onChange="changeleaveUserShowValue">隐藏离职员工</t-checkbox>
			</div>
		</div>
	</div>
</template>

<script>
	import { isButtonAuthority } from '@/unit/buttonAuthority'
	
	export default {
		data() {
			return {
				form: {
					positionValue: '',
					userNameValue: '',
				},
				popupVisible: false
			};
		},
		computed: {
			salaryDisabled(){
				if (this.$store.state.user.userIds.length === 0){
					return true
				} else {
					return false
				}
			},
			// 是否显示离职员工
			leaveUserShowValue(){
				return this.$store.state.user.userStateValue
			}
		},
		methods: {
			// 是否显示离职员工
			changeleaveUserShowValue(){
				this.$store.dispatch('user/changeUserStateValue')
			},
			// 权限审核
			isButtonAuthority(str){
				return isButtonAuthority(str)
			},
			// 筛选按钮点击事件
			determine(){
				if(this.form.userNameValue){
					if(this.form.positionValue){
						this.form.userNameValue = ''
						this.form.positionValue = ''
						this.$message.error('只能选择一个筛选条件')
						return
					}
					this.$store.dispatch('user/userNameSelect', this.form).then(res => {
						if(res.status === 1){
							this.$message.error(res.message)
							this.form.userNameValue = ''
						}
					})
					return
				}
				if(this.form.positionValue){
					this.$store.dispatch('user/positionSelect', this.form)
					return
				}
				if(!this.form.userNameValue && !this.form.positionValue){
					this.$message.error('请选择一个条件进行筛选')
					return
				}
			},
			// 点击添加员工
			goAddUser(){
				this.$router.push({
					name: 'AddUser'
				})
			},
			// 刷新本页面
			menuTree(){
				this.$router.go(0)
			},
			// 点击进入部门管理
			goDivisional(){
				this.$router.push({
					name: 'Divisional'
				})
			},
			// 点击进入岗位管理
			goPosition(){
				this.$router.push({
					name: 'Position'
				})
			},
			// go Salary
			goSalary(){
				this.$router.push({
					name: 'Salary',
					query: {
						ids: this.$store.state.user.userIds
					}
				})
			}
		},
	};
</script>

<style lang="less" scoped>
	.tdesign-demo__select-input-ul-single {
		padding: 4px 0;
	}

	.tdesign-demo__select-input-ul-single>li {
		display: block;
		border-radius: 3px;
		height: 40px;
		line-height: 22px;
		cursor: pointer;
		padding: 9px 8px;
		color: var(--td-text-color-primary);
		transition: background-color 0.2s cubic-bezier(0.38, 0, 0.24, 1);
		white-space: nowrap;
		word-wrap: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		box-sizing: border-box;
	}

	.tdesign-demo__select-input-ul-single>li:hover {
		background-color: var(--td-bg-color-container-hover);
	}
</style>
